<!DOCTYPE html>
<html>
<head>
<script src="../resources/common.js"></script>
<script src="../resources/picker-common.js"></script>
</head>
<body>
<select id="menu">
  <option>foo</option>
  <option selected>bar</option>
  <option style="font-size:8px;">qux</option>
  <option style="font-size:40px;">baz</option>
  <optgroup label="Group1">
    <option>Item 5</option>
    <option>Item 6</option>
  </optgroup>
</select>

<style>
select {
  appearance: none;
  padding: 1px 16px 1px 4px;
}
select:focus-visible {
  outline: none;
}
</style>
<script>
function touchOn(selector) {
  return new Promise((resolve, reject) => {
    let pos = elementCenterPosition(document.querySelector(selector));
    chrome.gpuBenchmarking.pointerActionSequence([{source:'touch', actions: [
        {name:'pointerDown', x:pos[0], y:pos[1]},
        {name:'pointerUp'}]}], resolve);
  });
}

function popup() {
  return new Promise((resolve, reject) => {
    popupWindow = internals.pagePopupWindow;
    setPopupOpenCallback(resolve);
  });
}

async function openPickerByTouch() {
  testRunner.waitUntilDone();
  await touchOn('#menu');
  await popup();
  testRunner.notifyDone();
}

openPickerByTouch();
</script>
</body>
</html>
